<template>
  <div id="right-quarter-card">
    <div class="title">
      <span class="title-name">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame_left.png" alt="" class="title-left">
        <span class="title-num">会员总数：<countTo :startVal="0" :endVal="Number(memberTatol)" :duration="500"></countTo></span>
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame_right.png" alt="" class="title_right">
      </span>
    </div>
    <div class="top">
      <span class="avator">头像</span>
      <span class="nickname">昵称</span>
      <span class="recommend">推荐人</span>
      <span class="date">注册时间</span>
    </div>

    <div class="tableoOut" ref="tableoOut">
      <div class="tableBox" ref="tableBox" :style="{ height: tableHei }">
        <div class="tableInner" ref="tableInner">
          <div class="box" v-for="item in dataList" :key="item">
            <div class="avator">
              <img :src="item.avatar_image" alt="" />
            </div>
            <span class="nickname">{{item.nickname}}</span>
            <span class="recommend">{{item.parent_nickname}}</span>
            <span class="date">{{item.register_at}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  props: {
    memberAllData: {
      type: null,
      default: () => []
    },
    ininValue: {
      type: null,
      default: true
    },
    total_member: {
      type: null,
      default: 0
    }
  },
  watch: {
    memberAllData(newVal, oldVal) {
      if(!this.ininValue) {
        this.initData();
      }
    },
    total_member() {
      this.memberTatol = this.total_member;
    }
  },
  data() {
    return {
      dataList: [],
      setTime: null,
      memberTatol: 0,
      tableHei: "auto",
      timer: null,
      stepTime: null, // 改为全局定时器
      time: 5
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let saveAllData = JSON.parse(JSON.stringify(this.memberAllData));
      this.dataList = JSON.parse(JSON.stringify(saveAllData));
      this.memberTatol = this.total_member;
      // if(saveAllData.length <= 5) {
      //   return
      // }
      // this.setTime = setInterval(() => {
      //   if(this.time >= saveAllData.length - 1) {
      //     this.time = 0;
      //   }
      //   this.time++
      //   this.showMarquee([JSON.parse(JSON.stringify(this.memberAllData))[this.time]], 500);
      // }, 2000);
    },
    // getTable(val) {
    //   this.scrolls(val);
    // },
    // stepScroll() {
    //   const tableBox = this.$refs.tableBox;
    //   // 改为全局定时器，且在调用前先进行清空
    //   clearInterval(this.stepTime);
    //   this.stepTime = setInterval(() => {
    //     tableBox.scrollTop -= 1;
    //   }, 1000 / 60);
    // },
    // scrolls(val) {
    //   const that = this;
    //   const tableBox = this.$refs.tableBox;
    //   let temp = 1;
    //   clearInterval(this.timer);
    //   this.timer = setInterval(function() {
    //     // 修改定时器结束判断条件
    //     if(temp >= 2) {
    //       clearInterval(this.timer);
    //       return
    //     }
    //     temp++
    //     tableBox.scrollTop = 40;
    //     that.stepScroll();
    //   }, 1000);
    // },
    // showMarquee(val, time) {
    //   setTimeout(() => {
    //     this.dataList.unshift(...val);
    //   },1000)
    //   this.getTable(val);
    // }
  },
  components: { countTo },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media screen and (max-height: 860px) {
  .box {
    height: 3.55vh !important;
  }
}

@media screen and (min-height: 970px) {
  .box {
    height: 3.58vh !important;
  }
}

@media screen and (min-height: 990px) {
  .box {
    height: 3.6vh !important;
  }
}

.tableoOut {
  height: 18vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
}

.tableBox {
  width: 100%;
  // height: 100% !important;
  overflow: hidden;
}

.tableInner {
  height: auto;
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box {
  width: 100%;
  height: 3.65vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.9rem;
}

.nickname {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: center;
}

.recommend {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: center;
  line-height: 1.2;
}

.date {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: center;
  word-wrap: break-word;
  margin-right: 0.4rem;
}

.right-value {
  color: #ead787;
}

.avator {
  flex: 1;

  img {
    width: 2.8vh;
    border-radius: 50%;
  }
}

// .marquee_top {
//   transition: all 0.5s;
//   margin-top: 1vh;
// }

#right-quarter-card {
  border-radius: 5px;
  margin: 0 10px 0 10px;
  background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_member_total.png') no-repeat;
  background-size: 100% 100%;
  // padding: 40px 10px 20px 0;
  padding: 2% 0 0 0.5%;
  position: relative;

  .title {
    color: white;
    font-size: 1rem;
    position: absolute;
    top: -3%;
    width: 100%;
    right: 0;

    .title-left {
      position: absolute;
      left: 7%;
      top: 23%;
      height: 2.2vh;
      width: 1vw;
    }

    .title_right {
      position: absolute;
      top: 23%;
      right: 6%;
      height: 2.2vh;
      width: 1vw;
    }

    .title-name {
      position: relative;
      // font-size: 1.05rem;
      background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame.png') no-repeat;
      background-size: 100% 100%;
      padding: 2% 6% 1.6% 6%;

      .title-num {
        color: #02d9fd;
        margin: 0 1%;
        height: 20px;
        vertical-align: text-top;
      }
    }
  }

  .top {
    // margin: 0 20px;
    display: flex;
    margin-bottom: 1%;
    font-size: 1rem;
    color: #02d9fd;
    // margin-bottom: 3%;
    .avator {
      flex: 1;
    }

    .nickname {
      flex: 2;
    }

    .recommend {
      flex: 2;
    }

    .date {
      flex: 2;
    }
  }

  .bottom-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-right: 2%;

    .bottom {
      display: flex;
      align-items: center;
      font-size: 0.8rem;

      .avator {
        flex: 1;

        img {
          width: 2.8vh;
          border-radius: 50%;
        }
      }

      .nickname {
        flex: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: center;
      }

      .recommend {
        flex: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: center;
      }

      .date {
        flex: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: center;
      }
    }
  }
}
</style>
